<template>
    <div class="message-container">
      <div title="全部删除" class="clear-message2">
            <span @click="deleteM2">
                <i class="el-icon-delete-solid"></i>
            </span>
      </div>
        <div title="全部已读" class="clear-message">
            <span @click="messageIsRead">
                <i class="el-icon-s-open"></i>
            </span>
        </div>
      <el-row v-if="messageList.length === 0">
        <el-empty description="暂无信息"></el-empty>
      </el-row>
      <el-row>
        <div class="item" v-for="(message,index) in messageList" :key="index">
            <div class="bell" :style="{backgroundColor: message.isRead ? 'rgb(246,246,246)' : 'rgb(239, 193, 87)'}">
                <i :style="{color: message.isRead ? 'rgb(51,51,51)' : 'rgb(246,246,246)'}" class="el-icon-message-solid">{{ message.isRead ? '已读' : '未读' }}</i>
            </div>
            <div style="width: 600px; ">
                <div class="content">{{ message.content }}</div>
                <div class="time">{{ message.createTime }}</div>

            </div>
          <el-button @click="deleteM(message.id)"  type="warning" round class="style22">删除</el-button>

        </div>
      </el-row>
    </div>
</template>
<script>
export default {
    name: 'Message',
    data() {
        return {
            messageList: [],
          selectedRows: [],
          selectedRows2: [],
        }
    },
    created() {
        this.fetchMessage();
    },
    methods: {
        messageIsRead(){
            this.$axios.post(`/message/setRead`).then(res => {
                const { data } = res; // 解构
                if (data.code === 200) {
                    this.$notify({
                        duration: 1000,
                        title: '消息清理成功',
                        message: data.msg,
                        type: 'success'
                    });
                    this.fetchMessage();
                }
            }).catch(error => {
                console.log("消息已读设置异常：", error);
            })
        },
        fetchMessage() {
            this.$axios.post(`/message/queryUser`,{}).then(res => {
                const { data } = res; // 解构
                if (data.code === 200) {
                    this.messageList = data.data;
                    this.selectedRows2 = this.messageList;
                }
            }).catch(error => {
                console.log("查询消息异常：", error);
            })
        },
      deleteM(message){
        this.selectedRows.push(message)

        let ids = this.selectedRows;
        console.log(ids);
        this.$axios.post(`/message/batchDelete`, ids).then(res => {
          const { data } = res; // 解构
          if (data.code === 200) {
            this.$notify({
              duration: 1000,
              title: '删除操作成功',
              message: data.msg,
              type: 'success'
            });
            this.fetchMessage();
            this.selectedRows = []
          }
        }).catch(error => {
          console.log("删除消息异常：", error);
        })
      },

      deleteM2() {
        if (this.selectedRows2.length == 0) {
          this.$notify({
            duration: 1000,
            title: '删除操作失败',
            message: '暂时没有消息',
            type: 'success'
          });
        }
        if (this.selectedRows2.length != 0) {
          let ids = this.selectedRows2.map(entity => entity.id);
          this.$axios.post(`/message/batchDelete`, ids).then(res => {
            const {data} = res; // 解构
            if (data.code === 200) {
              this.$notify({
                duration: 1000,
                title: '删除操作成功',
                message: data.msg,
                type: 'success'
              });
              this.fetchMessage();
              this.selectedRows = []
            }
          }).catch(error => {
            console.log("删除消息异常：", error);
          })
        }
      }

    }
};
</script>
<style scoped lang="scss">
.message-container{
    .clear-message{
        margin-block: 10px;
        display: flex;
        justify-content: right;
        span:hover{
            background-color: rgb(241,241,241); 
        }
        span{
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgb(246,246,246);
        }
    }
  .clear-message2{
    position: absolute;
    top: 100px;
    right: 200px;


    span:hover{
      background-color: rgb(241,241,241);
    }
    span{
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgb(246,246,246);
    }
  }
    .item{
      border-radius: 10px;
        padding: 20px 10px;
        display: flex;
        justify-content: left;
        gap: 20px;
        align-items: center;
      margin-bottom: 15px;
      background-color: #f3f2f2;
        .content{
            margin-block: 10px;
            font-size: 18px;
        }
        .time{
            margin-block: 2px;
            font-size: 12px;
        }
        .bell:hover{
            border: 2px solid rgb(220, 118, 44);
        }
        .bell{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgb(252, 232, 210);
            cursor: pointer;
            transition: all .5s;
            i{
                font-size: 12px;
                color: rgb(246,246,246);
            }
        }
    }
}
.style22{

  margin-left: 350px;
}

</style>